<template>
  <div class="m-adr-infos">
    <div class="top-info flex-left">
      <span>{{$t('address.title')}}</span>
      <span class="adr">{{adrInfo.adr|filterHash}}</span>
      <i
        class="iconfont iconfuzhi"
        v-clipboard:copy="adrInfo.adr"
        v-clipboard:success="success"
        v-clipboard:error="error"
      ></i>
      <!-- <el-popover placement="bottom" trigger="click">
        <div id="qrcode" ref="qrcode" class="flex-center"></div>
        <p class="erweima-btn" @click="downCode()">保存二维码</p>
        <i class="iconfont iconerweima" slot="reference"></i>
      </el-popover>-->
    </div>
    <h1>{{$t('blockDetail.general')}}</h1>
    <div class="infos-box table-shadow">
      <div class="item flex-left" v-if="isContact(adrInfo.adr)">
        <img src="../../../assets/img/tip/green.png">
        <label>{{$t('address.tag')}}</label>
        <span>{{adrInfo.adr|filterAdrTag}}</span>
      </div>
      <div class="item flex-between">
        <div class="flex-left">
          <img src="../../../assets/img/tip/pink.png">
          <label>{{$t('address.balance')}}</label>
          <span>{{parseFloat((adrInfo.balance/100000000).toFixed(4))}} {{$store.getters.baseCoin}}</span>
        </div>
        <el-select
          v-if="contractInfo.length>0"
          class="contract-type"
          v-model="contractSearch"
          :placeholder="$t('address.placeholder')"
          size="mini"
          @change="searchContract(contractSearch)"
        >
          <el-option v-for="(item, index) in contractInfo" :key="index" :value="item.execer"></el-option>
        </el-select>
      </div>
      <!-- <div class="item flex-left">
        <img src="../../../assets/img/tip/blue.png" />
        <label>总接收</label>
        <span>{{parseFloat((adrInfo.reciver/100000000).toFixed(4))}} {{$store.getters.baseCoin}}</span>
      </div>
      <div class="item flex-left">
        <img src="../../../assets/img/tip/green.png" />
        <label>总发送</label>
        <span>{{adrInfo.reciver?parseFloat(((adrInfo.reciver - adrInfo.balance)/100000000).toFixed(4)):0}} {{$store.getters.baseCoin}}</span>
      </div>-->
      <div class="item flex-left">
        <img src="../../../assets/img/tip/red.png">
        <label>{{$t('address.frozen')}}</label>
        <span>{{ adrInfo.frozen? parseFloat((adrInfo.frozen/100000000).toFixed(8)):0 }} {{$store.getters.baseCoin}}</span>
      </div>
      <div class="item flex-left">
        <img src="../../../assets/img/tip/blue.png">
        <label>{{$t('address.txCount')}}</label>
        <span>{{adrInfo.txCount}}</span>
      </div>
      <div class="item flex-left">
        <img src="../../../assets/img/tip/green.png">
        <label :class="{'value-total':isJa==='ja'}">{{$t('address.total')}}</label>
        <v-select class="token-select" :accValue="tokenBalance" :value="totalValue" size="small"></v-select>
      </div>
    </div>
  </div>
</template>

<script>
import vSelect from "./SelectBox";
import adrInfo from "@/mixins/Address/addressInfo.js";
export default {
  mixins: [adrInfo],
  components: {
    vSelect
  },
  computed: {
    isJa() {
      return this.$store.state.initLang;
    }
  }
};
</script>

<style lang="scss">
.m-adr-infos {
  // padding: 20px;
  .top-info {
    padding: 10px;
    background: $white;
    color: $black;
    span {
      margin-right: 15px;
    }
    .iconerweima {
      color: #f58348;
      margin-left: 15px;
    }
    .iconfuzhi {
      color: $blue;
    }
  }
  h1 {
    margin: 20px 0 10px;
    color: #53657a;
    font-size: 14px;
    font-family: PingFangSC-Semibold;
  }
  .infos-box {
    padding: 10px;
    background: $white;
  }
  .item {
    height: 37.5px;
    color: $black;
    label {
      margin: 0 10px;
      min-width: 5em;
    }
    .value-total {
      width: 10em;
    }
    .token-select {
      position: relative;
      z-index: 99;
      width: 215px;
    }
    .contract-type {
      width: 85px;
      input {
        border-radius: 20px;
      }
    }
  }
}
.erweima-btn {
  margin-top: 8px;
  text-align: center;
  color: $black;
}
</style>